<template>
  <view class="hire_page">
    <uni-popup ref="popup" background-color="#fff" borderRadius="24rpx  24rpx 0rpx  0rpx">
      <scroll-view scroll-y="true" style="height: calc(100vh - 412rpx);">
        <view style="padding: 48rpx 32rpx;">
          <rich-text :nodes="introduce"></rich-text>
        </view>
        <view style="padding: 8rpx 32rpx; border-top: 1rpx solid  #E7E7E7;box-sizing: border-box;">
          <view class="btn" style="position: fixed;" @click="changeRead">我已阅读</view>
        </view>
      </scroll-view>
    </uni-popup>
    <view class=" _w-max _top _left _z-index-5 _pos-fixed _top _left" style="background-color: #4C91FA;">
      <view :style="{ width: '100%', height: recHeight }"></view>
      <view class="felx_c h_96 f_s_18" style="position: relative;height: 96rpx;color: #FFFFFF;">
        <view @click="back" style="position: absolute;left: 24rpx;top: 24rpx;">
          <image style="width: 48rpx;height: 48rpx;"
            src="https://taxi.raxan.xyz/wechat/static/images/store_detail/a-chevron-left.png" mode="" />
        </view>
        签订合同
      </view>
    </view>
    <view class="top_bg">
      <view style="background-color: rgb(76,145,250);">
        <view :style="{ width: '100%', height: recHeight }"></view>
        <view class="_w-max" style="height: 96rpx;"></view>
        <view style="height: 72rpx;"></view>
      </view>
      <view style="height: 384rpx;background: linear-gradient( 180deg, rgb(76,145,250) 0%, #F5F5F5 100%);"></view>
    </view>
    <view :style="{ width: '100%', height: recHeight }"></view>
    <view class="_w-max h_96" style="height: 96rpx;"></view>
    <view class="container">
      <view class="container_top">
        <image class="hire_liucheng"
          src="https://taxi.raxan.xyz/wechat/static/images/23f8b7b722e17c9fd085d408a7bd420.png" />
      </view>
      <view class="form_area">
        <view class="black_bold">身份认证</view>
        <view class="gray_sub">应监管要求，请先进行身份认证</view>
        <uni-forms border label-width="100" ref="form" :modelValue="formData" :rules="rules">
          <uni-forms-item label="姓名" name="username" required>
            <input class="formItem" v-model="formData.username" type="text" placeholder="请输入联系人"
              @input="binddata('username', $event.detail.value)" />
          </uni-forms-item>
          <uni-forms-item label="手机号" name="phone" required>
            <input class="formItem" v-model="formData.phone" type="text" placeholder="请输入手机号"
              @input="binddata('phone', $event.detail.value)" />
          </uni-forms-item>
          <uni-forms-item label="地址" name="default" required>
            <input class="formItem" v-model="formData.default" type="text" placeholder="请输入地址"
              @input="binddata('default', $event.detail.value)" />
          </uni-forms-item>
          <uni-forms-item label="身份证号" name="id_card" required>
            <input class="formItem" v-model="formData.id_card" type="text" placeholder="请输入身份证号"
              @input="binddata('id_card', $event.detail.value)" />
          </uni-forms-item>
          <uni-forms-item label="有效期限" name="due_time" required>
            <picker :start="start" mode="date" :value="formData.due_time" @change="bindDateChange">
              <input class="formItem" disabled v-model="formData.due_time" type="text" placeholder="请选择有效期限" />
            </picker>
          </uni-forms-item>
        </uni-forms>
      </view>
    </view>
    <view style="height: 112rpx;"></view>

    <view class="btn" style="position: fixed;" @click="submit">下一步</view>
  </view>
</template>
<script>
  import {
    addSublease,
    signing
  } from '@/api/hire.js'
  import {
    viewContract,
    authSign
  } from '@/api/car.js'

  const concat = name => 'https://taxi.raxan.xyz/wechat/static/images/hire/' + name

  const IMAGES = {
    BANNER: concat('banner.png'),
    CHEVRO: 'https://taxi.raxan.xyz/wechat/static/images/store_detail/a-chevron-left.png',
    ARROW_RIGHT: concat('arrow_right.png'),
  }


  export default {
    data() {
      return {
        introduce: '',
        // 表单数据
        rate_index: '',
        scrollFilter: 0,
        vehInfo: {},
        formData: {
          id: '',
          username: '',
          id_card: '',
          due_time: '',
          signature_pic: '',
          phone: '',
          default: ''
        },
        rules: {
          due_time: {
            rules: [{
              required: true,
              errorMessage: '请选择有效期限'
            }]
          },
          username: {
            rules: [{
              required: true,
              errorMessage: '请输入联系人'
            }]
          },
          phone: {
            rules: [{
              required: true,
              errorMessage: '请输入手机号'
            }, {
              minLength: 11,
              maxLength:11,
               errorMessage: '请正确输入11位手机号'
            }]
          },
          default: {
            rules: [{
              required: true,
              errorMessage: '请输入地址'
            }]
          },
          id_card: {
            rules: [{
              required: true,
              errorMessage: '请输入身份证号'
            },{
              minLength: 18,
              maxLength:18,
              errorMessage: '请正确输入18位身份证号'
            }]
          }
        },
        recHeight: 0,
        imgs: IMAGES,
        srollOpacity: 0,
        srollColor: 255,
        navList: [],
        list: [],
        cate_id: '',
        total: 0,
        page: 1,
        loading: false,
        orderId: '',
        type: ''
      }
    },
    onPageScroll(e) {
      this.scrollFilter = e.scrollTop < 100 ? Math.floor(e.scrollTop / 100) : 1;
      this.srollColor = e.scrollTop < 100 ? 255 - Math.floor(e.scrollTop * 2.55) : 0;
      this.srollOpacity = e.scrollTop < 100 && e.scrollTop >= 20 ? '0.' + Math.floor(e.scrollTop) : e.scrollTop < 20 &&
        e.scrollTop >= 0 ? '0.0' + Math.floor(e.scrollTop) : e.scrollTop;
    },
    onLoad(options) {
      this.formData.id = options.id;
      this.orderId = options.order_id;
      this.type = options.type;
      // console.log(options);
      // this.viewContract();
      this.getPhoneInfo();
    },
    computed: {
      start() {
        const date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        month = month > 9 ? month : '0' + month;
        day = day > 9 ? day : '0' + day;
        return `${year}-${month}-${day}`;
      },
    },
    methods: {
      openVehConfig() {
        this.$refs.popup.open('bottom');
      },
      closeVehConfig() {
        this.$refs.popup.close();
      },
      viewContract() {
        viewContract({
          type: this.type,
          id: this.formData.id
        }).then(res => {
          this.introduce = res?.data?.content
          this.openVehConfig();
        })
      },
      bindDateChange: function(e) {
        this.formData.due_time = e.detail.value
      },
      back() {
        uni.navigateBack()
      },
      changeRead() {
        this.toSign()
      },
      submit() {

        this.$refs.form.validate().then(() => {
          const params = {
            name: this.formData.username,
            card_no: this.formData.id_card,
            validity_period: this.formData.due_time,
            type: 0, //个人是0 企业是1
            sign_type: this.type, // 转租是0 新租售是1
            resource_id: this.orderId,
            phone: this.formData.phone,
            default: this.formData.default
          }

          authSign({
            ...params
          }).then((res) => {
            console.log(res)
            if (this.type == 1) {
              this.formData.id = res.data.id
            }
            this.viewContract()
          })

        }).catch(err => {
          console.log('表单错误信息：', err);
        })
      },
      // 对公还款
      repaymentToPublic(orderId) {
        console.log(orderId)
        // uni.navigateTo({
        //   url:'/pages/car_sub/per_period_cost/index?order_id=' + orderId + '&type=' + this.type
        // }) 
        uni.reLaunch({
          url: '/pages/myCar/check'
        })
      },
      toSign() {
        uni.navigateTo({
          url: '/pages/hire_sub/sign/sign',
          events: {
            saveImage: src => {
              this.formData.signature_pic = src;
              const params = {
                signature_pic: src,
                id: this.formData.id,
                type: this.type,
              }
              console.log(params)
              signing({
                ...params,
              }).then((res) => {
                // this.viewContract()
                this.repaymentToPublic(res.data.id);
              })
              console.log(this.formData);
            }
          }
        })
      },
      addSublease(data) {
        this.checkLoading(
          () => addSublease(data).then(res => {
            if (res.status === 200) {
              this.back();
            }
          }).catch(err => {
            uni.showToast({
              title: '发布失败，请重试',
              icon: "none"
            })
          })
        )
      },
      checkLoading(fn) {
        this.loading = true;
        uni.showLoading({
          title: '加载中'
        })
        fn().finally(() => {
          this.loading = false;
          uni.hideLoading()
        })
      },
      // 获取顶部高度信息
      getPhoneInfo() {
        uni.getSystemInfo({
          success: (res) => {
            this.recHeight = res.statusBarHeight + 'px'; //获取手机状态栏高度
          }
        });
      }
    }
  }
</script>
<style lang="scss" scoped>
  .top_bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 0;
    height: 456rpx;
  }

  .h_96 {
    height: 96rpx;
  }

  .c_fff {
    color: #FFFFFF;
  }

  .btn {
    line-height: 96rpx;
    color: #F8F9FC;
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
    background-color: #008DFF;
    border-radius: 12rpx;
    position: fixed;
    left: 32rpx;
    right: 32rpx;
    bottom: 8rpx;
    z-index: 10;
  }

  .f_s_18 {
    font-size: 36rpx;
  }

  .felx_c {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .black_bold {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    color: #111E36;
    line-height: 38rpx;
    margin-bottom: 24rpx;
  }

  .gray_sub {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.6);
    line-height: 33rpx;
    margin-bottom: 28rpx;
  }

  .hire_page {
    box-sizing: border-box;
    position: relative;
    min-height: 101vh;
    background: #F8F9FC;
    color: rgba(0, 0, 0, 0.9);

    .formItem {
      box-sizing: content-box;
      padding: 14rpx 0;
    }

    .container {
      position: relative;
      z-index: 2;

      .container_top {
        margin: 32rpx 26rpx 36rpx 32rpx;

        .hire_liucheng {
          width: 100%;
          height: 130rpx;
          left: 0;
          top: 0;
        }
      }

      .form_area {
        margin: 0 32rpx;
        padding: 32rpx;
        padding-bottom: 12rpx;
        background: #FFFFFF;
        border-radius: 16rpx;

        /deep/ .uni-forms-item__label {
          color: #333333 !important;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500 !important;
          font-size: 28rpx !important;
        }
      }

    }
  }
</style>